<template>
	<view class="content">
		<view class="top">
			<view class="orderStatus">
				<view class="name">
					订单{{getStatusText(orderInfo.status)}}
				</view>
				<view class="time" v-if="orderInfo.status == 0">
					支付剩余时间：{{countdown}}
				</view>
			</view>
			<view class="addressInfo" v-if="orderInfo.receiverName">
				<view class="title">
					<image src="/static/ad.png" mode=""></image>配送信息
				</view>
				<view class="text">
					<view class="t1">
						{{orderInfo.receiverName}} {{orderInfo.receiverPhone}}
					</view>
					<view class="t2 clamp1">
						 {{orderInfo.receiverDetailAddress}}
					</view>
				</view>
			</view>
			<view class="sbox" :style="{'padding-bottom':bottomPadding?bottomPadding+70+'px':'90px'}">
				<view class="box">
					<view class="goodsInfo">
						<view class="item" v-for="item in orderInfo.orderItemList" :key="item.id">
							<image :src="item.productPic" mode=""></image>
							<view class="right">
								<view class="name clamp2">
									{{item.productName}}
								</view>
								<view class="cate">
									{{getProductAttr(item.productAttr)}}
								</view>
								<view class="bot">
									<view class="price">
										￥<text>{{item.productPrice}}</text>
									</view>
									<view class="num">
										x{{item.productQuantity}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="other">
						<view class="item">
							<view class="text">商品总额</view>
							<view class="note">
								￥<text>{{orderInfo.totalAmount}}</text>
							</view>
						</view>
						<view class="item" v-if="orderInfo.couponAmount">
							<view class="text">优惠券</view>
							<view class="note">
								-￥<text>{{orderInfo.couponAmount}}</text>
							</view>
						</view>
						<view class="item" v-if="orderInfo.receiverName">
							<view class="text">运费</view>
							<view class="note" v-if="orderInfo.freightAmount">
								￥<text>{{orderInfo.freightAmount}}</text>
							</view>
							<view class="note" v-else>
								包邮
							</view>
						</view>
					</view>
					<view class="allPrice">
						<text class="text">应付款</text>
						<view class="note">
							￥<text>{{orderInfo.payAmount}}</text>
						</view>
					</view>
				</view>
				<view class="orderInfo">
					<view class="title">
						订单信息
					</view>
					<view class="item" v-if="orderInfo.note">
						<text class="text">订单备注</text>
						<text class="num">{{orderInfo.note}}</text>
					</view>
					<view class="item">
						<text class="text">订单编号</text>
						 <text class="num">{{orderInfo.orderSn}}</text>
						<view class="copy" @click="handleCopy">复制</view>
					</view>
					<view class="item">
						<text class="text">下单时间</text> <text class="num">{{orderInfo.createTime}}</text>
					</view> 
					<view class="item" v-if="orderInfo.paymentTime">
						<text class="text">付款金额</text> <text class="num">{{orderInfo.payAmount}}</text>
					</view>
					<view class="item" v-if="orderInfo.paymentTime">
						<text class="text">支付方式</text> <text class="num">微信支付</text>
					</view>
					<view class="item" v-if="orderInfo.paymentTime">
						<text class="text">支付时间</text> <text class="num">{{orderInfo.paymentTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fixedBottom"  v-if="orderInfo.status == 0 || orderInfo.status == 2 || orderInfo.status == 3 && !orderInfo.commentTime" :style="{'padding-bottom':bottomPadding?bottomPadding+'px':'15px'}">
			<view class="bottom">
				<view class="btn1" v-if="orderInfo.status == 0" @click="handleCancelOrder">取消订单</view> 
				<view class="btn" v-if="orderInfo.status == 0" @click="handleAgainPay">去付款</view> 
				
				<!-- <view class="btn" v-if="orderInfo.status == 1" @click="handleAgainPay">提醒发货</view> -->
				<!-- <view class="btn" v-if="orderInfo.status == 1 && orderInfo.refund == 'true'" @click="handleToAfterSale('1')">申请退款</view> -->
				
				<!-- <view class="btn1" v-if="orderInfo.status == 2" @click="handleViewExpress">查看物流</view> -->
				<view class="btn" v-if="orderInfo.status == 2" @click="handleConfirmReceipt">确认收货</view>
				
				<view  v-if="orderInfo.status == 3 && !orderInfo.commentTime" class="btn" @click="handleToSubmitReviews">立即评价</view>
			</view>
		</view> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				goods_num: 1,
				orderInfo: {
					list:[{
						good_title:'迪奥马鞍包单肩包',
						price:'20999',
						number:'2',
						cate:'蓝色'
					}],
					price_total:'20999',
					yhq:'100',
					yf:'10',
					yfk:'20000',
					order_desc:'备注信息',
					order_no:'LEETA218745956908',
					createtime_text:'2025-01-12 13:12:45',
					pay_time_text:'2025-01-12 13:18:20',
					status:0
				},
				bottomPadding: 0,
				countdown: '',
				timer: null
			}
		},
		onLoad(options) {
			this.bottomPadding = uni.getStorageSync('bottomPadding') 
			this.id = options.id
			this.getOrderInfo()
		},
		
		onUnload() {
		    // 页面卸载时清除定时器
		    if (this.timer) {
		      clearInterval(this.timer);
		    }
		  },
		methods: {
			getProductAttr(arr){
				return JSON.parse(arr).map(item=>item.value).join('_')
			},
			getStatusText(status){
				return status == 0 ? '待付款' : status == 1 ? '待发货' : status == 2 ? '已发货' :  status == 3 ? '已完成' : status == 4 ? '已关闭' : status == 5 ? '无效订单' : ''
			},
			handleViewExpress(){
				uni.navigateTo({
					url:"./express"
				})
			},
			handleCopy(){
				uni.setClipboardData({
					data: this.orderInfo.orderSn,
					success: function () {
						uni.showToast({
							title:"复制成功",
							icon:"none"
						})
					},
					fail: (e) => {
						console.log('eeee',e)
					}
				});
			},
			handleAgainPay(){
				this.$http({
					url:'/order/againPay',
					method:'post',
					data: {
						orderId:this.id,
					}
				}).then(res=>{ 
					 uni.requestPayment({
						timeStamp: res.payInfo.timeStamp,
						nonceStr: res.payInfo.nonceStr,
						package: res.payInfo.package,
						signType: res.payInfo.signType,
						paySign: res.payInfo.paySign,
						success: (res) => {
							uni.showToast({
								title: '支付成功'
							}) 
							this.getOrderInfo();
						},
						fail:(res) => { 
							if(res.errMsg == 'requestPayment:fail cancel'){
								uni.showToast({
									title:'取消支付',
									icon:'none'
								}) 
							 } 
						  }
					 }) 
				})
			},
			
			handleToAfterSale(type){
				const newArr = this.orderInfo.list.filter(item=>item.refund_state <= 0)
				uni.navigateTo({
					url:`/pages/order/submitAfterSale?type=${type}&info=${JSON.stringify(newArr)}&id=${this.id}&source=detail&allLength=${this.orderInfo.list.length}`
				})  
			},
			handleToSubmitReviews(){ 
				uni.navigateTo({
					url:`./submitReviews?info=${JSON.stringify(this.orderInfo.orderItemList)}&id=${this.id}&source=detail`
				}) 
			},
			handleConfirmReceipt(){
				uni.showModal({
					content: '确认收货吗',
					success: (res) =>{
						if (res.confirm) {
							this.$http({
								url:"/order/confirmReceiveOrder",
								method:'post',
								data:this.id
							}).then(data=>{
								uni.showToast({
									title:"操作成功",
									icon:"none"
								})  
								 setTimeout(() => {
								 	this.getOrderInfo()
								  }, 500) 
								let pages = getCurrentPages()
								let prePages = pages[pages.length - 2].$vm  
								prePages.page = 1
								prePages.getList()
							})
						} 
					}
				}); 
			},
			handleCancelOrder(){
				uni.showModal({
					content: '确定要取消订单吗',
					success: (res) =>{
						if (res.confirm) {
							this.$http({
								url:"/order/cancelUserOrder",
								method:"post",
								data:this.id
							}).then(()=>{
								uni.showToast({
									title:"取消成功",
									icon:"none"
								})
								
								let pages = getCurrentPages()
								let prePages = pages[pages.length - 2].$vm  
								prePages.page = 1
								prePages.getList()
								 setTimeout(() => {
								 	this.getOrderInfo()
								  }, 500) 
							})
						} 
					}
				});   
			},
			getOrderInfo() {
				this.$http({
					url: `/order/detail/${this.id}`,
					method: 'get',
				}).then(data => {
					this.orderInfo = data
					if(data.status == 0){ 
						this.startCountdown();
					}
				})
			},
			
			 startCountdown() {
			  // 将字符串时间转换为 Date 对象
			  const futureTime = new Date(this.orderInfo.orderCloseTime.replace(/-/g, '/'));
			  // 获取未来时间的时间戳
			  const futureTimestamp = futureTime.getTime();
			  this.timer = setInterval(() => {
				// 获取当前时间的时间戳
				const currentTimestamp = new Date().getTime();
				// 计算剩余的毫秒数
				const remainingTime = futureTimestamp - currentTimestamp;
				if (remainingTime > 0) {
				  // 将剩余的毫秒数转换为天、小时、分钟和秒
				  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
				  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
				  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
				  // 格式化倒计时显示
				  this.countdown = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
				} else {
				  // 倒计时结束，清除定时器
				  clearInterval(this.timer);
				  this.countdown = '已结束';
				}
			  }, 1000);
			},
		}
	}
</script>

<style>
	page {
		background:#F8F8F8;
	}
</style>


<style lang="scss" scoped>
	.sbox{
		margin-top: 30rpx;
	} 
	.allPrice{
		display: flex;
		justify-content: flex-end;
		font-size: 28rpx;
		color: #020202;
		.note{
			font-size: 32rpx;
			margin-left: 15rpx;
		}
	}
	.top {
		position: relative;
		z-index: 99;
		padding:30rpx;
		padding-bottom: 0;
		box-sizing: border-box;

		.orderStatus {
			color: #0E0E0E;
			margin-bottom: 30rpx;
			.time{
				margin-top: 20rpx;
				color: red;
				font-size: 24rpx;
			}
			.name {
				font-size: 30rpx;
				font-weight: bold; 
			} 
		}
	}

	.orderInfo {
		padding: 24rpx;
		background: #fff;
		margin-top: 30rpx; 
		.title{
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.item {
			height: 60rpx;
			display: flex;
			align-items: center;

			.text {
				font-size: 24rpx;
				color: #666;
			}

			.num {
				font-size: 24rpx;
				color: #666;
				margin-left: 20rpx;
			}

			.copy {
				font-size: 24rpx;
				color: #333;
				margin-left: 20rpx;
			}
		}
	}

	.pd30 {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.fixedBottom {
		position: fixed;
		width: 100%;
		background: #fff;
		bottom: 0%;
		left: 0%;
		z-index: 999;

		.tips {
			background: #FFE8E8;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			color: #CF302D;
			font-size: 24rpx;
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 30rpx 40rpx;
			padding-bottom: 0;
			box-sizing: border-box;

			.text {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.price {
				font-size: 28rpx;
				color: #E12319;

				text {
					font-size: 36rpx;
				}
			}

			.btn {
				border-radius: 50rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 50rpx;
				color: #fff;
				font-size: 30rpx;
				background: #020202;
				border: 1px solid #020202;
				margin-left: 30rpx;
			}

			.btn1 {
				border-radius: 50rpx;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 50rpx;
				color: #020202;
				font-size: 30rpx;
				border: 1px solid #020202;
				margin-left: auto;
			}
		}
	}

	.box {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 20rpx;
		border-radius: 16rpx;

		.allPrice {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;

			.text {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}

			.price {
				font-size: 28rpx;
				color: #E12319;

				text {
					font-size: 36rpx;
				}
			}
		}

		.other {
			padding-bottom:10rpx;
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				.text {
					font-size: 28rpx;
					color: #333333; 
				}

				.note {
					font-size: 28rpx;
					margin-left: 10rpx;
					color: #666;
				}
			}
		}

		.goodsInfo {
			.item {
				display: flex;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #eee;

				image {
					width: 180rpx;
					height: 180rpx; 
				} 
				.right {
					display: flex;
					flex-direction: column;
					flex: 1;
					margin-left: 30rpx;

					.name {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
					}
					.cate{
						font-size: 24rpx;
						color: #999999;
						margin-top: 8rpx;
					}
					.bot {
						margin-top: auto;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							font-size: 30rpx;
							color: #333; 
						} 
						.num {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}
	}

	.addressInfo {
		padding: 26rpx;
		box-sizing: border-box;
		background: #fff;
		.title{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #020202;
			font-weight: bold;
			margin-bottom: 40rpx;
			image{
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
		.text { 
			.t1 {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.t2 {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.icon2 {
			margin-left: auto;
		}
	}
</style>